<script lang="ts" setup name="systemOperation">
import { getListByConditionsWithPage, urls } from '@/index';
import type { OperationQueryCondition, Operation } from '@/index.d';
import { useRequest } from 'vue-request';

const title = '操作';

const operationQueryCondition = reactive<OperationQueryCondition>({
  currentPage: 1,
  pageSize: 20,
  change: false,
  deleted: false
});

const resetOperationQueryCondition = () => {
  operationQueryCondition.currentPage = 1;
  operationQueryCondition.pageSize = 20;
  delete operationQueryCondition.method;
  delete operationQueryCondition.username;
};

const getOperationList = () => {
  return getListByConditionsWithPage<Operation>(urls.operation, operationQueryCondition);
};

const {
  data: operationWithPage,
  loading,
  run: getOperationListWithPage
} = useRequest(getOperationList, {
  debounceInterval: 300
});

watch(
  () => [operationQueryCondition.method, operationQueryCondition.username],
  () => getOperationListWithPage()
);

const handleResetQuery = () => {
  resetOperationQueryCondition();
  getOperationListWithPage();
};
</script>
<template>
  <HqContainerTable
    :title
    :loading
    :baseUrl="urls.operation"
    :total="operationWithPage?.total"
    :table-data="operationWithPage?.records"
    @handle-query="getOperationListWithPage"
    @handle-reset-query="handleResetQuery"
    v-model:pageSize="operationQueryCondition.pageSize"
    v-model:current-page="operationQueryCondition.currentPage"
  >
    <template #search>
      <hq-col kind="search">
        <el-select v-model="operationQueryCondition.method" placeholder="请选择方法" clearable>
          <el-option label="get" value="get" />
          <el-option label="post" value="post" />
          <el-option label="put" value="put" />
          <el-option label="delete" value="delete" />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select v-model="operationQueryCondition.username" filterable clearable>
          <hq-user-options />
        </el-select>
      </hq-col>
    </template>

    <template #tableColumns>
      <hq-table-column prop="requestUri" label="requestUri" :min-width="600" align="left" />
      <hq-table-column prop="scheme" label="scheme" />
      <hq-table-column prop="serverPort" label="serverPort" />
      <hq-table-column prop="method" label="method" />
      <hq-table-column prop="serverName" label="serverName" />
      <hq-table-column prop="remoteHost" label="remoteHost" />
      <hq-table-column prop="remoteAddr" label="remoteAddr" />
      <hq-table-column prop="username" label="账号" />
    </template>

    <template #pagination> </template>
  </HqContainerTable>
</template>
<style lang="scss" scoped></style>
